<template>
  <div @mouseup="clickPoint" style="background-color: rgb(58,58,58);overflow: hidden;">
    <el-row>
      <el-col :span="24">
        <Map2dSimple :mapData="mapData2" :dateTime="dateTime"></Map2dSimple>
      </el-col>
    </el-row>
    <div style="position: absolute;top: 10px;left: 10px;">
      <el-row>
        <el-col :span="24">
          <span style="color: #fff;font-size: 30px;font-family: 微软雅黑;">{{dateTime}}&nbsp;&nbsp;全国影城票房分布</span>
        </el-col>
      </el-row>
      <br/>
      <el-row>
        <el-col :span="24" style="display:inline-block;">
          <span style="font-size: 40px;font-family: 微软雅黑;color:rgb(255, 192, 0);vertical-align: middle;">
            大盘票房:
          </span>
          <span style="font-size: 70px;font-family: 微软雅黑;color:rgb(255, 192, 0);vertical-align: middle;">
            {{dapanData.boxoffice}}
          </span>
        </el-col>
      </el-row>
    </div>
    <div style="position: absolute;top: 10px;right: 10px">
      <img src="~assets/img/cfc_logo.png" height="96px" width="130px" alt="">
    </div>
  </div>
</template>

<script>
  import Vue from 'vue'
  import axios from 'axios'
  import Component, {namespace, Getter} from 'class-component'
  import Map2dSimple from '~/components/map2dSimple'
  import moment from 'moment'
  import provinceNameDesc from '~/components/map2dSimple/province'

  const ScreenMapDataGetter = namespace('screenMapData', Getter)
  moment.locale('zh-cn')

  @Component({
    components: {
      Map2dSimple
    }
  })
  export default class TestChartManage extends Vue {
    @ScreenMapDataGetter timer
    @ScreenMapDataGetter provinceTimer
    @ScreenMapDataGetter autoTimer
    dateTime = moment(Date.now() - 8.64e7).format('YYYY年MM月DD日')
    param = {
      dateTime: moment(Date.now() - 8.64e7).format('YYYYMMDD')
    }
    items = [{
      name: '首页',
      to: '/'
    }, {
      name: '全国票房分布',
      to: '/chart/spreadMap'
    }]
    isAuto = true
    waitSecond = 0
    mapDate = Date.now() - 8.64e7
    mapData2 = {}
    dapanData = {}
    provinces = [] // 用于自动跳转页面获取省份code
    mounted () {
      let self = this
      if (self.provinceTimer !== null) {
        clearInterval(self.provinceTimer)
      }
      if (self.timer !== null) {
        clearInterval(self.timer)
      }
      if (self.autoTimer !== null) {
        clearInterval(self.autoTimer)
      }
      axios.get('/api/theater/boxofficerank?date=' + this.param.dateTime).then((res) => {
        if (res.data.success) {
          this.mapData2 = res.data.data
        }
      })
      axios.get('/api/home/dapan?date=' + this.param.dateTime).then((res) => {
        if (res.data.success) {
          if (res.data.data.boxoffice < 100000000) {
            this.dapanData = {boxoffice: (res.data.data.boxoffice / 10000).toFixed(2) + '万'}
          } else {
            this.dapanData = {boxoffice: (res.data.data.boxoffice / 100000000).toFixed(2) + '亿'}
          }
        }
      })
      axios.get('/api/dimension/provinces').then((res) => {
        if (res.data.success) {
          self.provinces = res.data.data
        }
      })
      let timerId = setInterval(function () {
        if (self.isAuto === false) {
          self.isAuto = true
          self.waitSecond = 0
        } else {
          if (self.waitSecond === 15) {
            // 触发轮转
            let temp = self.provinces.find(function (value, index, arr) {
              return value.name === provinceNameDesc[0].name
            })
            self.$router.push({path: '/chart/spreadMap', query: {provinceKey: 0, provinceCode: temp.code, provinceName: provinceNameDesc[0].desc}})
            clearInterval(timerId)
          } else {
            self.waitSecond++
          }
        }
      }, 1 * 1000)
      self.$store.dispatch('screenMapData/set_AutoTimer', timerId)
    }
    pickerOptions= {
      disabledDate (time) {
        return time.getTime() > Date.now() - 8.64e7
      }
    }
    clickPoint (e) {
      this.isAuto = false
    }
  }
</script>
